<template>
  <h1>当前求和为：{{sum}}</h1>
  <button @click="sum++">点我+1</button>
  <br />
  <br />
  <h1>当前信息为：{{msg}}</h1>
  <button @click="msg += '!'">点我+!</button>
  <br />
  <br />
  <h2>姓名：{{person.name}}</h2>
  <h2>年龄：{{person.age}}</h2>
  <h2>薪水：{{person.job.j1.salary}}</h2>
  <button type="button" @click="person.name += '-'">修改名字</button>
  <button type="button" @click="person.age++">修改年龄</button>
  <button type="button" @click="person.job.j1.salary++">修改年龄</button>
</template>

<script>
// import Vue from 'vue'
import { ref, reactive, watch } from 'vue'

export default {
  name: 'Demo',
  /* watch: {
    // sum(newVal, oldVal) {
    //   console.log("sum的值变了", newVal, oldVal)
    // }
    sum: {
      deep: true,
      immediate: true,
      handler(newVal, oldVal) {
        console.log("sum的值变了", newVal, oldVal)
      }
    }
  }, */
  setup() {
    let sum = ref(10)
    let msg = ref("你好")
    let person = reactive({
      name: '张三',
      age: 20,
      job: {
        j1: {
          salary: 20
        }
      }
    })

    // watch监视  情况一：监视单个ref所定义的响应式数据
    /* watch(sum, (newVal, oldVal) => {
      console.log("sum的值变了", newVal, oldVal)
    }, {immediate: true}) */


    // watch监视  情况二：监视多个ref所定义的响应式数据
    // 完整写法
    /* watch(sum, (newVal, oldVal) => {
      console.log("sum的值变了", newVal, oldVal)
    }, {immediate: true})
    watch(msg, (newVal, oldVal) => {
      console.log("sum的值变了", newVal, oldVal)
    }, {immediate: true}) */

    // 简写(监听多个)
    /* watch([sum, msg], (newVal, oldVal) => {
      console.log("watch值变了", newVal, oldVal)
    }, {immediate: true}) */


    /* watch监视  情况三：监视reactive所定义的一个响应式数据，
      1.注意：此处无法正确的获取oldVal
      2.注意：强制开启了深度监视（deep配置无效），但是deep： false限制了(newVall, oldVal)里面的回调事件
    */
    /* watch(person, (newVall, oldVal) => {
      console.log(person, newVall, oldVal)
    }, {deep: false}) */


    // watch监视  情况四：监视reactive所定义的一个响应式数据中的某个属性
    // 会调用函数，但是无法打印出新旧值
    // [Vue warn]: Invalid watch source:  20 A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types. 
    /* watch(person.age, (newVall, oldVal) => {
      console.log(person.age, newVall, oldVal)
    }) */
    // 这样能正常监听
    /* watch(() => person.age, (newVall, oldVal) => {
      console.log(person.age, newVall, oldVal)
    }) */

    
    // watch监视  情况五：监视reactive所定义的一个响应式数据中的某些属性
    /* watch([() => person.name, () => person.age], (newVall, oldVal) => {
      console.log(person.name, person.age, newVall, oldVal)
    }) */


    // 特殊情况 deep: true必须如此配置
    watch(() => person.job, (newVall, oldVal) => {
      console.log(person.job, newVall, oldVal)
    }, {deep: true})  // 此处由于监视的是reactive定义的对象中的某个属性，所以deep配置有效


    // 返回一个对象，暴露给模板使用（常用）
    return {
      sum,
      msg,
      person
    }
  }
}
</script>

<style>

</style>
